import React from 'react';
import { WeaTools, WeaLocaleProvider, WeaAvatar } from 'ecCom';
import './index.less';

const getLabel = WeaLocaleProvider.getLabel;

class WeaPortalAccountList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { accountlist: [] };
  }

  componentWillMount() {
    WeaTools.callApi('/api/portal/account/getAccount', 'GET').then((result) => {
      const { accountlist = [] } = result.data || {};
      this.setState({ accountlist });
    });
  }

  render() {
    const { className = '' } = this.props;
    const { accountlist } = this.state;
    const accountlength = accountlist.length;

    return (
      <div className={`wea-portal-account-list ${className}`}>
        {accountlength > 1 ? (
          <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@v4nmer`}>
            <div className="wea-portal-account-title">
              <span>{getLabel(131608, '主次账号切换')}</span>
            </div>
            <div className="wea-portal-account-splitter" />
          </React.Fragment>
        ) : null}
        <div className="wea-portal-account-list2">
          {accountlist.map((item, index) => {
            const { userid, usertype, username, iscurrent, jobs, subcompanyname, deptname } = item;
            const sdname = subcompanyname && deptname ? `${subcompanyname}/${deptname}` : '';

            return (
              <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_React.Fragment@gokath@${userid}`} key={index}>
                <div className="wea-portal-account-item">
                  <div className="wea-portal-account-item-avatar" onClick={e => this.onOpen(e, userid)}>
                    <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@rfxfv1@${userid}`} userId={userid} />
                  </div>
                  <div
                    className="wea-portal-account-item-infos"
                    onClick={(e) => {
                      if (accountlength > 1 && iscurrent != '1') {
                        this.onChange(userid);
                      } else {
                        this.onOpen(e, userid);
                      }
                    }}
                  >
                    {usertype == '0' && (
                      <span className="wea-portal-account-item-usertype">
                        <i className="icon-coms02-Main-account-number" />
                      </span>
                    )}
                    <span title={username} className="wea-portal-account-item-username" onClick={e => this.onOpen(e, userid)}>
                      {username}
                    </span>
                    <span title={jobs} className="wea-portal-account-item-jobs">
                      {jobs}
                    </span>
                    <br />
                    <div title={sdname} className="wea-portal-account-item-sdname">
                      {sdname}
                    </div>
                  </div>
                  {accountlength > 1 && iscurrent == '1' ? <i className="icon-coms02-icon-Completion wea-portal-account-checked" /> : ''}
                </div>
                <div className="wea-portal-account-splitter" />
              </React.Fragment>
            );
          })}
        </div>
      </div>
    );
  }

  onOpen = (e, userid) => {
    e.preventDefault && e.preventDefault();
    e.stopPropagation && e.stopPropagation();

    this.props.onVisibleChange && this.props.onVisibleChange(false);

    const url = `/spa/hrm/index_mobx.html#/main/hrm/card/cardInfo/${userid}`;
    if (this.props.onOpen) {
      this.props.onOpen({ url });
    } else {
      window.open(url);
    }
  };

  onChange = (userid) => {
    WeaTools.callApi('/api/hrm/login/identityShift', 'POST', { shiftid: userid }).then((result) => {
      if (result.status == '1') {
        WeaTools.ls.set('isInitLSValue', false);
        window.location.reload();
      }
    });
  };
}

export default WeaPortalAccountList;
